<template>
    <div id="box" class="app-container">

        <!-- 查询条件开始 -->
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">

            <el-row>
                <el-col :span="6">
                    <el-form-item label="用户名称" prop="userName">
                        <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable size="small" style="width:140px"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="用户账号" prop="loginAccount">
                        <el-input v-model="queryParams.loginAccount" placeholder="请输入用户账号" clearable size="small" style="width:140px"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="IP地址" prop="ipAddr">
                        <el-input v-model="queryParams.ipAddr" placeholder="请输入IP地址" clearable size="small" style="width:140px"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search"  circle @click="queryTable"></el-button>
                        <el-button type="warning" icon="el-icon-refresh" circle @click="refreshDictType"></el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="登陆状态" prop="loginStatus">
                        <el-select v-model="queryParams.loginStatus" placeholder="请选择登陆状态" clearable size="small" style="width:140px">
                            <el-option
                                    v-for="dict in statusOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="登陆类型" prop="loginType">
                        <el-select v-model="queryParams.loginType" placeholder="请选择登陆类型" clearable size="small" style="width:140px">
                            <el-option
                                    v-for="dict in loginTypeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="创建时间">
                        <el-date-picker
                                v-model="queryParams.dateRange"
                                size="small"
                                style="width:210px"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                range-separator="-"
                                start-placeholde="开始日期"
                                end-placeholde="结束日期"
                        />
                    </el-form-item>
                </el-col>
                <!--<el-col :span="6">-->
                <!--    <el-form-item>-->
                <!--        <el-button type="normal" icon="el-icon-refresh" size="mini" @click="refreshDictType">重置</el-button>-->
                <!--    </el-form-item>-->
                <!--</el-col>-->
            </el-row>
        </el-form>
        <!-- 查询条件结束 -->

        <!-- 表头按钮开始 -->
        <el-row :gutter="10" style="margin-bottom: 8px;">
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">批量删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-thumb" size="mini" @click="truncateTable">清空</el-button>
            </el-col>
        </el-row>
        <!-- 表头按钮结束 -->

        <!-- 数据表格开始 -->
        <el-table  border :data="loginInfoTableList" :ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="日志ID" align="center" prop="infoId" sortable/>
            <el-table-column label="用户姓名" align="center" prop="userName" />
            <el-table-column label="登陆帐号" align="center" prop="loginAccount" width="120"/>
            <el-table-column label="IP" width="130" align="center" prop="ipAddr" />
            <el-table-column label="登陆地址" align="center" prop="loginLocation" />
            <el-table-column label="浏览器" align="center" prop="browser" />
            <el-table-column label="操作系统" align="center" prop="os" />
            <el-table-column label="登陆状态" prop="loginStatus" align="center" :formatter="statusFormat" />
            <el-table-column label="用户类型" prop="loginType" align="center" :formatter="loginTypeFormat" />
            <el-table-column label="登陆时间" align="center" prop="loginTime" width="200" sortable/>
            <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.userId!=1" type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据表格结束 -->

        <!-- 分页控件开始 -->
        <el-pagination
                v-show="page.total>0"
                :current-page="page.current"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <!-- 分页控件结束 -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                //模糊查询的数据
                queryParams:{},
                //初始化状态数据
                statusOptions:[],
                //初始化登录类型数据
                loginTypeOptions:[],
                // 非多个禁用
                multiple: true,
                //存放表格所有数据
                loginInfoTableList:[],
                //存放表中选中的数据
                multipleTable:[],
                //存放被选中的数据id
                ids:[],
                //分页数据
                page:{
                    current:1,
                    size:5,
                    total:0
                },
            }
        },
        created() {
            this.initTable();
            this.initStatus();
            this.initLoginType();
        },
        methods: {
            /* 表格外按钮点击事件 */
            queryTable(){    //模糊查询按钮触发
                this.page.current=1;
                this.initTable();
            },
            refreshDictType(){  //重置模糊查询按钮触发
                this.queryParams={};
                this.initTable();
            },
            handleDelete(row){  //删除按钮触发事件
                //哪一个有值就将哪一个赋值给dictIds
                const infoIds = row.infoId || this.ids
                this.$confirm('此操作将永久删除被选中的登陆日志, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete(`/system/api/logininfo/deleteLoginInfoByIds/${infoIds}`).then(result=>{
                        if (result.data.data){
                            this.$message({
                                showClose: true,
                                message: result.data.msg,
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                showClose: true,
                                message: '操作失败',
                                type: 'error'
                            });
                        }
                        this.page.current=1;
                        this.initTable();
                    })
                }).catch(() => {
                    this.$message.info('删除已取消')
                })
            },
            truncateTable(){  //清空登录日志表格所有数据
                this.$confirm('此操作将永久删除所有的登陆日志, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/system/api/logininfo/truncateTable").then(result=>{
                        if (result.data.data){
                            this.$message({
                                showClose: true,
                                message: result.data.msg,
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                showClose: true,
                                message: '操作失败',
                                type: 'error'
                            });
                        }
                        this.initTable();
                    })
                }).catch(() => {
                    this.$message.info('删除已取消')
                })
            },

            /*表格内点击事件*/
            handleSelectionChange(selection) { // 数据表格的多选择框选择时触发
                this.ids = selection.map(item => item.infoId)
                //没有行被选中的时候，将批量删除按钮禁用
                this.multiple = !selection.length
            },

            /*初始化数据*/
            initTable(){  //查询表格中数据
                this.$http.post("/system/api/logininfo/selectAll/"+this.page.current+"/"+this.page.size,this.queryParams).then(result=>{
                    this.loginInfoTableList = result.data.data.records;
                    this.page.total = result.data.data.total;
                })
            },
            initStatus(){   //初始化状态字典
                this.$http.get("/system/api/dict/data/findByType/sys_normal_disable").then(result=>{
                    this.statusOptions = result.data.data;
                })
            },
            statusFormat(row){  //状态字典解析
                let v = row.loginStatus;
                return this.formatDict2(this.statusOptions,v);
            },
            initLoginType(){   //初始化登录类型字典
                this.$http.get("/system/api/dict/data/findByType/sys_user_type").then(result=>{
                    this.loginTypeOptions = result.data.data;
                })
            },
            loginTypeFormat(row){  //登录类型字典解析
                let v = row.loginType;
                return this.formatDict2(this.loginTypeOptions,v);
            },
            // 分页pageSize变化时触发
            handleSizeChange(val) {
                this.page.size = val
                // 重新查询
                this.initTable()
            },
            // 点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                this.page.current = val
                // 重新查询
                this.initTable()
            },
        },

    }
</script>
<style>
  #box{
    margin: 15px;
  }
</style>
